<template>
	<view class="GoodsInfo">
		<view class="section">
			<view class="wrap">
				<view class="price-box">
					<text class="price">
						<text class="price-tip">¥</text>
						{{$util.toDecimal2(info.price)}}
					</text>
					<text class="m-price" v-if="info.original_price != info.price">
						¥{{$util.toDecimal2(info.original_price)}}
					</text>
					<text class="coupon-tip" v-if="info.original_price != info.price">
						{{$util.toDecimal2(info.discount * 10)}}折
					</text>
				</view>
				<view class="share-btn" @tap="shareStatus = true">
					<view class="iconfont icon-share"></view>
					分享
				</view>
			</view>
			<view class="title">{{info.name}}</view>
			<view class="description">{{info.description}}</view>
		</view>
		<share :open="shareStatus" @close="shareStatus = false"></share>
	</view>
</template>

<script>	
	import Share from '../Share.vue';
	
	export default {
		name: 'GoodsInfo',
		components: {
			Share,
		},
		props: {
			theData: {
				type: Object,
				default: () => {
					return {};
				},
			},
		},
		data() {
			return {
				shareStatus: false,
			}
		},
		computed: {
			info() {
				let theInfo = JSON.parse(JSON.stringify(this.theData)); 
				let {
					name: name,
					original_price: original_price,
					discount: discount,
					price: price,
					description: description,
					...rest
				} = theInfo;
				return { name, original_price, discount, price, description, ...rest };
			},
		},
		methods: {
		}
	}
</script>

<style>
	@import '../../static/iconfont.css';
</style>
<style lang="scss">
	.GoodsInfo {
		.section{
			background: #fff;
			padding: 20upx 30upx;
			margin-bottom: 10px;
			.wrap{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.price-box{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					line-height: 44upx;
					font-size: 30upx;
					color: #f47925;
					.price{
						font-size: 40upx;
					}
					.m-price{
						margin:0 12upx;
						color: #909399;
						text-decoration: line-through;
					}
					.coupon-tip{
						align-items: center;
						padding: 4upx 10upx;
						color: #fff;    
						background: #f47925;
						font-size: 24upx;
						border-radius: 6upx;
						line-height: 1;
						transform: translateY(-4upx); 
					}
				}
				.share-btn{
					padding: 0 0 0 10upx;
					font-size: 20upx;
					min-width: 55upx;
					color: #555555;
					.iconfont{
						line-height: 1;
						font-size: 46upx;
						color: #555555;
					}
				}
			}
			.title{
				margin: 10upx 0;
				font-size: 32upx;
				color: #303133;
				line-height: 50upx;	
			}
			.description{
				font-size: 26upx;
				color: #7e7e7e;
				background: #eaeaea;
				line-height: 38upx;
				padding: 10upx 20upx;
				border-radius: 6upx;
			}
		}		
	}
</style>
